<template>
	<view class="firm" v-if="elem">
		<view class="header">
			<view class="icon">
				<uni-icons type="left" size="50rpx" color="#fff" @click="backHandler"></uni-icons>
				<view class="botm" v-if="collectCompanyId.indexOf(elem?._id)" @click="addCollectCompany(elem._id)">
					<uni-icons type="plusempty" size="30rpx" color="#fff"></uni-icons><text>关注</text>
				</view>
				<view v-else @click="removeCollectCompany(elem._id)" class="botms">已关注</view>
			</view>
			<view class="title">{{ elem?.title }}</view>
			<view class="logo">
				<!-- <img :src="elem?.logoUrl" alt="" /> -->
				<image :src="elem?.logoUrl" mode=""></image>
			</view>
		</view>
		<view class="null"></view>
		<view class="section">
			<view class="texts">
				<view class="smalltitle">
					{{ elem?.companyRange }}&nbsp;|&nbsp;{{
		              elem?.companyNumber
		            }}&nbsp;|&nbsp;{{ elem?.companyType }}
				</view>
				<view class="text">{{ elem?.description }}</view>
			</view>

			<view class="times">
				<text>工作时间</text>
				<view class="time">
					<view v-for="(item, index) in elem?.workTime" :key="index">
						{{ item }}
					</view>
				</view>
			</view>

			<view class="welfare">
				<text>员工福利</text>
				<view class="workstore" v-for="(work, index) in elem?.welfare" :key="index + 'work'">
					<view class="workimg"><img :src="work.img" alt="" /></view>
					<view class="worktext">
						<text>{{ work.title }}</text>
						<view>{{ work.descp }}</view>
					</view>
				</view>
			</view>

			<view class="site">
				<text>公司地址</text>
				<view>地址：{{ elem.address }}</view>
			</view>
		</view>
	</view>
	<!-- <view class="olod" v-else>
		<van-loading color="#17b2b4" size="30rem" />
	</view> -->

</template>

<script>
	export default {
		name: "Firm",
		data() {
			return {
				elem: null,
				botm: true,
				collectCompanyId: JSON.parse(localStorage.getItem("collectCompanyId")) || [],
				collectCompanyList: JSON.parse(localStorage.getItem("collectCompanyList")) || [],
			};
		},
		onLoad(option) {
			if (option.id) {
				uni.request({
						url: "https://yw.52kfw.cn/api/v1/company/company-info?companyid=" + option.id
					}).then((res) => {
						//   console.log(res.data.data);
						this.elem = res.data.data;
						this.toLearnList = [...res.data.data.description];
					})
					.catch(() => {
						return;
					});

			}
		},
		methods: {
			backHandler() {
				uni.navigateBack()
			},
			//关注公司
			addCollectCompany(id) {
				let token = localStorage.getItem("token");
				if (token) {
					this.collectCompanyId = [...this.collectCompanyId, id];
					localStorage.setItem("collectCompanyId", JSON.stringify(this.collectCompanyId));
					this.collectCompanyList = [...this.collectCompanyList, this.elem]
					localStorage.setItem("collectCompanyList", JSON.stringify(this.collectCompanyList));

					uni.showToast({
						title: '关注成功',
						icon: 'none'
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					});
				}
			},
			//取消关注公司
			removeCollectCompany(id) {
				this.collectCompanyId = this.collectCompanyId.filter((o) => o != id);
				localStorage.setItem("collectCompanyId", JSON.stringify(this.collectCompanyId));
				this.collectCompanyList = this.collectCompanyList.filter((o) => o._id != id);
				localStorage.setItem("collectCompanyList", JSON.stringify(this.collectCompanyList));
				uni.showToast({
					title: '取消关注',
					icon: 'none'
				})
			},
			
			
		},
	};
</script>

<style lang="scss">
	.firm {
		width: 100vw;

		.null {
			height: 250rpx;
		}

		.section {
			width: 100vw;

			.site {
				padding: 0 30rpx 20rpx 30rpx;

				text {
					font-size: 28rpx;
					font-family: SourceHanSansCN;
					font-weight: bold;
					color: #333333;
					line-height: 70rpx;
					text-align: start;
				}

				view {
					font-size: 28rpx;
					color: #000;
					text-align: start;
					display: -webkit-box;
					white-space: wrap;
				}
			}

			.welfare {
				padding: 20rpx 30rpx;

				text {
					font-size: 28rpx;
					font-family: SourceHanSansCN;
					font-weight: bold;
					color: #333333;
					line-height: 70rpx;
					text-align: start;
				}

				.workstore {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: start;
					margin-bottom: 30rpx;

					.workimg {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 20%;

						img {
							width: 50rpx;
							height: 50rpx;
						}
					}

					.worktext {
						width: 80%;
						display: flex;
						flex-direction: column;
						//   justify-content: space-between;
						text-align: start;

						p {
							font-size: 28rpx;
							font-family: SourceHanSansCN;
							font-weight: 400;
							color: #333333;
							line-height: 28rpx;
							text-align: start;
							width: 100%;
						}

						view {
							color: #999;
						}
					}
				}
			}

			.times {
				padding: 0rpx 30rpx 0;

				text {
					font-size: 28rpx;
					font-family: SourceHanSansCN;
					font-weight: bold;
					color: #333333;
					line-height: 70rpx;
					text-align: start;
				}

				.time {
					font-size: 24rpx;
					color: #999;
					display: flex;
					justify-content: start;

					view {
						margin: 0 12rpx 0 0;
					}
				}
			}

			.texts {
				//   height: 200rpx;
				width: 100%;
				text-align: start;
				padding: 30rpx 30rpx 20rpx 200rpx;

				.smalltitle {
					font-size: 24rpx;
					width: 100%;
					font-family: SourceHanSansCN;
					font-weight: 400;
					color: #333333;
					line-height: 40rpx;
					// transform: scale(0.9);
					text-align: start;
					margin-left: 22rpx;
				}

				.text {
					width: 100%;
					font-size: 24rpx;
					font-family: SourceHanSansCN;
					font-weight: 300;
					color: #999;
					line-height: 36rpx;
					transform: scale(0.9);
					display: -webkit-box;
					-webkit-line-clamp: 4;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-box-orient: vertical;
				}
			}
		}

		.header {
			height: 250rpx;
			box-sizing: border-box;
			background-color: #5fae53;
			width: 100vw;
			padding: 180rpx 0rem 10rpx 220rpx;
			color: #fff;
			position: fixed;
			top: 0;
			right: 0;
			left: 0;

			.icon {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				width: 100vw;
				padding: 30rpx 40rpx;
				display: flex;
				justify-content: space-between;

				.botm {
					width: 120rpx;
					height: 56rpx;
					border: 2rpx solid #fff;
					border-radius: 26rpx;
					line-height: 56rpx;
					text-align: center;
					font-size: 26rpx;

					i {
						margin: 4rpx;
					}
				}

				.botms {
					width: 120rpx;
					height: 56rpx;
					border: 2rpx solid #bbb;
					color: #bbb;
					border-radius: 26rpx;
					line-height: 56rpx;
					text-align: center;
					font-size: 28rpx;
				}
			}

			.title {
				font-size: 36rpx;
				font-weight: bold;
				text-align: start;
			}

			.logo {
				position: absolute;
				bottom: -70rpx;
				left: 40rpx;
				width: 140rpx;
				height: 140rpx;
				border-radius: 20rpx;
				box-shadow: 2rpx 4rpx 20rpx 2rpx #f4f4f4;

				image {
					width: 140rpx;
					height: 140rpx;
					display: block;
					width: 100%;
					border-radius: 20rpx;
				}
			}
		}
	}

	.olod {
		position: fixed;
		top: 50%;
		width: 80rpx;
		height: 80rpx;
		margin-top: -40rpx;
		left: 50%;
		margin-left: -40rpx;
		z-index: 1000;
	}
</style>
